<template>
  <div>
    <div class="main-content">
      <a-row :gutter="12">
        <a-col :span="24">
          <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
            <a-col :span="2" style="width: 100px; flex: 0 0 100px">
              <div class="title-name">餐段</div>
            </a-col>
            <a-col :span="24" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="8"
                  ><div class="title-name">用餐人数<span class="title-unit">（人）</span></div></a-col
                >
                <a-col :span="8"
                  ><div class="title-name">收入<span class="title-unit">（万元）</span></div></a-col
                >
                <a-col :span="8"
                  ><div class="title-name">
                    {{ currentRestType === 'ba' ? '人均消费' : '食品人均消费' }}
                    <span class="title-unit">（元）</span>
                  </div></a-col
                >
              </a-row>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 10px" :gutter="[12, 12]" v-if="currentRestType === 'ad'">
            <a-col :span="2" style="width: 100px; flex: 0 0 100px">
              <div class="title-name vercial-mode col-title">早餐</div>
            </a-col>
            <a-col :span="24" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="bdinnersData">
                    <BarSingleLittleImg v-if="bdinnersData.length > 0" :dataList="bdinnersData" unit="人" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="bincomeData">
                    <BarSingleLittleImg v-if="bincomeData.length > 0" :dataList="bincomeData" unit="万元" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="bdinnersData">
                    <BarSingleLittleImg v-if="bconsumeData.length > 0" :dataList="bconsumeData" unit="元" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 10px" :gutter="[12, 12]" v-if="['ad', 'cn', 'sp'].includes(currentRestType)">
            <a-col :span="2" style="width: 100px; flex: 0 0 100px">
              <div :class="getTitleClass()"> 午餐 </div>
            </a-col>
            <a-col :span="24" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="ldinnersData">
                    <BarSingleLittleImg v-if="ldinnersData.length > 0" :dataList="ldinnersData" unit="人" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="lincomeData">
                    <BarSingleLittleImg v-if="lincomeData.length > 0" :dataList="lincomeData" unit="万元" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="lconsumeData">
                    <BarSingleLittleImg v-if="lconsumeData.length > 0" :dataList="lconsumeData" unit="元" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 10px" :gutter="[12, 12]" v-if="['ad', 'cn', 'sp'].includes(currentRestType)">
            <a-col :span="2" style="width: 100px; flex: 0 0 100px">
              <div :class="getTitleClass()">晚餐</div>
            </a-col>
            <a-col :span="24" style="flex: 1">
              <a-row :gutter="12">
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="ddinnersData">
                    <BarSingleLittleImg v-if="ddinnersData.length > 0" :dataList="ddinnersData" unit="人" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="dincomeData">
                    <BarSingleLittleImg v-if="dincomeData.length > 0" :dataList="dincomeData" unit="万元" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="dconsumeData">
                    <BarSingleLittleImg v-if="dconsumeData.length > 0" :dataList="dconsumeData" unit="元" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 10px" :gutter="[12, 12]" v-if="currentRestType === 'ba'">
            <a-col :span="2" style="width: 100px; flex: 0 0 100px">
              <div class="title-ba col-title">
                <div class="title-baname">宴会</div>
                <div class="title-remark">(除婚宴)</div>
              </div>
            </a-col>
            <a-col :span="24" style="flex: 1">
              <a-row :gutter="[12, 12]">
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="bandinnersData">
                    <BarSingleLittleImg v-if="bandinnersData.length > 0" :dataList="bandinnersData" unit="人" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="banincomeData">
                    <BarSingleLittleImg v-if="banincomeData.length > 0" :dataList="banincomeData" unit="万元" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="banconsumeData">
                    <BarSingleLittleImg v-if="banconsumeData.length > 0" :dataList="banconsumeData" unit="元" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 10px" :gutter="[12, 12]" v-if="currentRestType === 'ba'">
            <a-col :span="2" style="width: 100px; flex: 0 0 100px">
              <div class="title-name vercial-mode col-title3">婚宴</div>
            </a-col>
            <a-col :span="24" style="flex: 1">
              <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="webdinnersData">
                    <BarSingleLittleImg v-if="webdinnersData.length > 0" :dataList="webdinnersData" unit="人" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="webincomeData">
                    <BarSingleLittleImg v-if="webincomeData.length > 0" :dataList="webincomeData" unit="万元" />
                  </FlexCard>
                </a-col>
                <a-col :span="8">
                  <FlexCard :loading="loading" :class="getFlexCardClass()">
                    <BarSingleLittleImg v-if="webconsumeData.length > 0" :dataList="webconsumeData" unit="元" formatter="dot2Formatter|0" />
                  </FlexCard>
                </a-col>
              </a-row>
              <a-row :gutter="[12, 12]" style="margin-bottom: 10px">
                <a-col :span="24">
                  <a-row :gutter="12">
                    <a-col :span="6"
                      ><div class="title-name">场次<span class="title-unit">（场）</span></div></a-col
                    >
                    <a-col :span="6"
                      ><div class="title-name">收入每次场<span class="title-unit">（万元）</span></div></a-col
                    >
                    <a-col :span="6"
                      ><div class="title-name">桌数<span class="title-unit">（卓）</span></div></a-col
                    >
                    <a-col :span="6"
                      ><div class="title-name">收入每卓<span class="title-unit">（元）</span></div></a-col
                    >
                  </a-row>
                </a-col>
              </a-row>
              <a-row :gutter="[12, 12]">
                <a-col :span="24">
                  <a-row :gutter="[12, 12]">
                    <a-col :span="6">
                      <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="sessionsData">
                        <BarSingleLittleImg v-if="sessionsData.length > 0" :dataList="sessionsData" unit="场" formatter="dot2Formatter|0" />
                      </FlexCard>
                    </a-col>
                    <a-col :span="6">
                      <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="sessionsPerData">
                        <BarSingleLittleImg v-if="sessionsPerData.length > 0" :dataList="sessionsPerData" unit="万元" />
                      </FlexCard>
                    </a-col>
                    <a-col :span="6">
                      <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="tablesData">
                        <BarSingleLittleImg v-if="tablesData.length > 0" :dataList="tablesData" unit="元" formatter="dot2Formatter|0" />
                      </FlexCard>
                    </a-col>
                    <a-col :span="6">
                      <FlexCard :loading="loading" :class="getFlexCardClass()" :dataList="tablePerData">
                        <BarSingleLittleImg v-if="tablePerData.length > 0" :dataList="tablePerData" unit="元" formatter="dot2Formatter|0" />
                      </FlexCard>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <!-- <ReportRemarkCard class="remark-height" :loading="loading" v-if="reportCode" title="说明" :reportCode="reportCode" :reportName="reportName" /> -->
    </div>
  </div>
</template>
<script>
  import { defHttp } from '/@/utils/http/axios';
  import * as Color from '/@/utils/ColorDefault';
  import * as MathUtil from '/@/utils/MathUtil';
  import FlexCard from '@/views/applications/ui/FlexCard.vue';
  // import ReportRemarkCard from '@/views/applications/ui/ReportRemarkCard.vue';
  import BarSingleLittleImg from '@/views/applications/ui/BarSingleLittleImg.vue';
  import { Row as ARow, Col as ACol } from 'ant-design-vue';

  const REPORT_NAME = '酒店月度餐段数据（项目）';
  const REPORT_CODE = 'hotel-month-single-meal';
  const APIS = {
    admonth: 'getHotelMonthReportAdMeal',
    adyear: 'getHotelMonthReportAccAdMeal',
    cnmonth: 'getHotelMonthReportCnMeal',
    cnyear: 'getHotelMonthReportAccCnMeal',
    spmonth: 'getHotelMonthReportSpMeal',
    spyear: 'getHotelMonthReportAccSpMeal',
    bamonth: 'getHotelMonthReportBaMeal',
    bayear: 'getHotelMonthReportAccBaMeal',
  };

  export default {
    name: REPORT_NAME,

    components: {
      FlexCard,
      // ReportRemarkCard,
      BarSingleLittleImg,
      ARow,
      ACol,
    },

    props: {
      hotelList: {
        type: Array,
        default: () => [
          {
            name: '',
            value: '',
          },
        ],
      },
      currentHotel: {
        type: Object,
        default: () => ({
          name: '',
          code: '',
        }),
      },
      lastMonth: {
        type: String,
        default: '',
      },
      currentAcc: {
        type: String,
        default: 'month',
      },
      currentRestType: {
        type: String,
        default: 'ad',
      },
    },

    data() {
      return {
        title: '餐饮部分-中餐厅',
        reportCode: '',
        reportName: '',
        loading: false,
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        typeList: [
          { label: '全日餐厅', value: 'ad' },
          { label: '中餐厅', value: 'cn' },
          { label: '特色餐厅', value: 'sp' },
          { label: '宴会', value: 'ba' },
        ],
        bincomeData: [],
        bdinnersData: [],
        bconsumeData: [],
        lincomeData: [],
        ldinnersData: [],
        lconsumeData: [],
        dincomeData: [],
        ddinnersData: [],
        dconsumeData: [],
        banincomeData: [],
        bandinnersData: [],
        banconsumeData: [],
        webincomeData: [],
        webdinnersData: [],
        webconsumeData: [],
        sessionsData: [],
        tablesData: [],
        sessionsPerData: [],
        tablePerData: [],
      };
    },

    watch: {
      currentHotel: {
        handler(val) {
          if (val && val.code) {
            this.fetchData();
          }
        },
        deep: true,
      },
      lastMonth() {
        this.fetchData();
      },
      currentAcc() {
        this.fetchData();
      },
      currentRestType() {
        this.fetchData();
      },
    },

    created() {
      // if(this.currentHotel.code) {
      //   this.fetchData();
      // }
    },

    methods: {
      fetchData() {
        this.loading = true;
        defHttp
          .post({
            url: '/data/query',
            data: {
              labelCode: APIS[`${this.currentRestType}${this.currentAcc}`],
              sqlParams: [
                { key: 'code', value: this.currentHotel.code },
                { key: 'month', value: this.lastMonth },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            console.log('res', res);

            const dataList = res.datas.success ? res.datas.data : [];
            if (dataList.length === 0) {
              this.clearAllData();
            } else {
              const data = dataList[0];
              console.log('dataList', dataList);
              console.log('data', data);

              // 早餐数据
              this.bdinnersData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.bdinners,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lBdinners,
                  color: Color.COLOR_WARN,
                },
              ];
              this.bincomeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.bincome,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lBincome,
                  color: Color.COLOR_WARN,
                },
              ];
              this.bconsumeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.bfincome, data.bdinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lBfincome, data.lBdinners),
                  color: Color.COLOR_WARN,
                },
              ];

              // 午餐数据
              this.ldinnersData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.ldinners,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lLdinners,
                  color: Color.COLOR_WARN,
                },
              ];
              this.lincomeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.lincome,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lLincome,
                  color: Color.COLOR_WARN,
                },
              ];
              this.lconsumeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.lfincome, data.ldinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lLfincome, data.lLdinners),
                  color: Color.COLOR_WARN,
                },
              ];

              // 晚餐数据
              this.ddinnersData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.ddinners,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lDdinners,
                  color: Color.COLOR_WARN,
                },
              ];
              this.dincomeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.dincome,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lDincome,
                  color: Color.COLOR_WARN,
                },
              ];
              this.dconsumeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.dfincome, data.ddinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lDfincome, data.lDdinners),
                  color: Color.COLOR_WARN,
                },
              ];

              // 宴会数据
              this.bandinnersData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.bdinners,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lBdinners,
                  color: Color.COLOR_WARN,
                },
              ];
              this.banincomeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.bincome,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lBincome,
                  color: Color.COLOR_WARN,
                },
              ];
              this.banconsumeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.bincome, data.bdinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lBincome, data.lBdinners),
                  color: Color.COLOR_WARN,
                },
              ];

              // 婚宴数据
              this.webdinnersData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.wdinners,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lWdinners,
                  color: Color.COLOR_WARN,
                },
              ];
              this.webincomeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.wincome,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lWincome,
                  color: Color.COLOR_WARN,
                },
              ];
              this.webconsumeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.wincome, data.wdinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lWincome, data.lWdinners),
                  color: Color.COLOR_WARN,
                },
              ];

              // 场次数据
              this.sessionsData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.sessions,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lSessions,
                  color: Color.COLOR_WARN,
                },
              ];
              this.tablesData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.tables,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: data.lTables,
                  color: Color.COLOR_WARN,
                },
              ];
              this.sessionsPerData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.wincome, data.sessions),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lWincome, data.lSessions),
                  color: Color.COLOR_WARN,
                },
              ];
              this.tablePerData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.wincome, data.tables),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lWincome, data.lTables),
                  color: Color.COLOR_WARN,
                },
              ];
            }
            const accName = this.accList.filter((a) => a.value === this.currentAcc)[0].label;
            this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-${this.currentRestType}`;
            this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-${this.currentRestTypeName}`;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },

      clearAllData() {
        this.bincomeData = [];
        this.bdinnersData = [];
        this.bconsumeData = [];
        this.lincomeData = [];
        this.ldinnersData = [];
        this.lconsumeData = [];
        this.dincomeData = [];
        this.ddinnersData = [];
        this.dconsumeData = [];
        this.banincomeData = [];
        this.bandinnersData = [];
        this.banconsumeData = [];
        this.webincomeData = [];
        this.webdinnersData = [];
        this.webconsumeData = [];
        this.sessionsData = [];
        this.tablesData = [];
        this.sessionsPerData = [];
        this.tablePerData = [];
      },

      getTitleClass() {
        return {
          'title-name': true,
          'vercial-mode': true,
          'col-title': this.currentRestType === 'ad',
          'col-title2': ['cn', 'sp'].includes(this.currentRestType),
        };
      },
      getFlexCardClass() {
        return {
          'custom-card': true,
          'flex-height': true,
          // 'flex-height': ['ad', 'ba'].includes(this.currentRestType),
          // 'flex-height2': ['cn', 'sp'].includes(this.currentRestType),
        };
      },
      getBanFlexCardClass() {
        return {
          'custom-card': true,
          'flex-height3': ['ba'].includes(this.currentRestType),
        };
      },
      getRemarkCardClass() {
        return {
          'custom-card': true,
          'remark-height': ['ad'].includes(this.currentRestType),
          'remark-height2': ['cn', 'sp'].includes(this.currentRestType),
          'remark-height3': ['ba'].includes(this.currentRestType),
        };
      },
    },
  };
</script>

<style lang="less" scoped>
  .main-frame-header {
    display: flex;
    top: 0;
    width: 100%;
    height: 63px;
    background-color: #112c4d;
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.3);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }

  .main-frame-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
  }

  .main-frame-header-container {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: inherit;
  }

  .main-frame-header-start {
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
  }

  .main-frame-header-center {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .main-frame-remark {
    color: #ffffff;
    font-size: 12px;
    margin-top: 3px;
  }

  .main-frame-header-end {
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
  }

  .main-frame-header-item {
    flex: 0 0 auto;
    margin: 0 8px 0 8px;
  }

  .main-content {
    padding: 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }

  .card-double {
    display: flex;
    justify-content: space-between;

    &-item {
      flex-basis: 48%;
    }
  }

  .card-point {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
  }
  .card-remark {
    font-size: 12px;
    // text-align: right;
    display: flex;
    align-items: center;
  }
  .card-title {
    margin-right: 90px;
  }

  .interval-area {
    margin-bottom: 12px;
  }

  .select-title-space {
    margin-right: 20px;
    width: 200px;
  }

  ::v-deep .select-title .van-cell {
    color: hsl(217, 16%, 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: unset;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-color: #112c4d;
  }

  .popup-right {
    width: auto;

    &-content {
      height: 800px;
      width: 318px;

      &-oprate {
        display: flex;
        padding: 16px;
        justify-content: center;

        &-item {
          width: 100%;
          margin-right: 10px;
        }

        &-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  @media @desktop {
    .main-frame-desktop-header {
      padding: 1rem;
      background: #fff;
      overflow: hidden;
    }

    .flex-height .echarts {
      width: 100%;
      height: 198px;
    }

    .flex-height3 .echarts {
      width: 100%;
      height: 198px;
    }

    .flex-height2 .echarts {
      width: 100%;
      height: 298px;
    }

    .unline {
      text-decoration: underline;
    }
    .card-intitle {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }
    .card-top {
      text-align: center;
      margin-bottom: 12px;
    }
    .card-flex {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .card-left {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
    .card-img {
      padding: 12px;
      border-radius: 10px;
      background-color: #f7f5f4;
    }
    .dash-line {
      border-left: 1px dashed #d9d9d9;
    }
    .title-name {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      background: #ffffff;
      -webkit-box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      border-radius: 0.5rem;
      font-size: 16px;
      font-weight: 600;
      .title-unit {
        font-weight: 400;
      }
    }
    .title-ba {
      display: flex;
      flex-direction: column; /* 纵向排列 */
      align-items: center; /* 水平居中 */
      justify-content: center;
      text-align: center;
      height: 36px;
      background: #ffffff;
      -webkit-box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      border-radius: 0.5rem;
      font-size: 16px;
      font-weight: 600;
    }
    .title-baname {
      writing-mode: vertical-rl; /* 文字竖排 */
      text-orientation: upright; /* 字符方向直立 */
      text-align: center; /* 水平居中竖排文字 */
    }
    .title-remark {
      font-size: 10px;
      font-weight: 400;
      text-align: center;
    }
    .vercial-mode {
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }
    .custom-card {
      margin: 0px;
    }
    .col-title {
      height: 230px;
      width: 100%;
    }
    .col-title2 {
      height: 230px;
      // height: 327px;
      width: 100%;
    }
    .col-title3 {
      height: 516px;
      width: 100%;
    }
    .flex-height {
      height: 230px;
    }
    .flex-height2 {
      height: 326px;
    }
    .flex-height3 {
      height: 264px;
    }
    .remark-height {
      height: auto;
    }
    .remark-height2 {
      height: 714px;
    }
    .remark-height3 {
      height: 802px;
    }
    .sub-title {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
  }
</style>
